<template>
  <div class="seamless-scroll">
    <div class="table-header">
      <div class="table-item">物资名称</div>
      <div class="table-item">类型</div>
      <div class="table-item">操作</div>
      <div class="table-item">数量</div>
    </div>
    <vue3-seamless-scroll hover-stop="true" :list="listData" :hover="true" :limitScrollNum="15" :step="0.2"
      class="table-content">
      <div class="table-list" v-for="(item, index) in listData" :key="index">
        <div class="table-item">{{ item.goodsName }}</div>
        <div class="table-item">{{ item.type == 1 ? '借用物资' : '领用物资' }}</div>
        <div class="table-item">{{ filterOperate(item.operate) }}</div>
        <div class="table-item">{{ item.number }}</div>
      </div>
    </vue3-seamless-scroll>

  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const listData = ref([
  {
    goodsName: '铅笔',
    type: 1,
    operate: 1,
    number: 12
  },
  {
    goodsName: '马克笔',
    type: 2,
    operate: 1,
    number: 12
  },
  {
    goodsName: '毛笔',
    type: 1,
    operate: 3,
    number: 12
  },
  {
    goodsName: '宣纸',
    type: 2,
    operate: 1,
    number: 12
  },
  {
    goodsName: '铅笔',
    type: 1,
    operate: 1,
    number: 12
  },
  {
    goodsName: '铅笔',
    type: 2,
    operate: 1,
    number: 12
  },
  {
    goodsName: '彩色马克笔',
    type: 1,
    operate: 1,
    number: 12
  },
  {
    goodsName: '铅笔',
    type: 2,
    operate: 4,
    number: 12
  },
  {
    goodsName: '乔丹牌篮球',
    type: 1,
    operate: 1,
    number: 12
  },
  {
    goodsName: '红双喜乒乓球拍',
    type: 1,
    operate: 2,
    number: 12
  },
  {
    goodsName: '李宁网球拍',
    type: 2,
    operate: 1,
    number: 12
  },
  {
    goodsName: '铅笔',
    type: 1,
    operate: 3,
    number: 12
  },
  {
    goodsName: '铅笔',
    type: 1,
    operate: 1,
    number: 12
  },
  {
    goodsName: '铅笔',
    type: 1,
    operate: 2,
    number: 12
  },
  {
    goodsName: '铅笔',
    type: 1,
    operate: 1,
    number: 12
  },
  {
    goodsName: '铅笔',
    type: 1,
    operate: 4,
    number: 12
  },
  {
    goodsName: '铅笔',
    type: 1,
    operate: 4,
    number: 12
  },
])

function filterOperate(val: number) {
  switch (val) {
    case 1:
      return '借用';
    case 2:
      return '领用';
    case 3:
      return '归还';
    case 4:
      return '入库';
  }
}
</script>
<style lang="scss" scoped>
.seamless-scroll {
  max-height: 60rem;
  display: grid;
  grid-template-rows: 0.8fr 9.2fr;

  .table-header {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0.5rem 0;
    background-color: rgba(9, 144, 186, 0.1);


    .table-item {
      place-self: center;
      padding: 0 2rem;
      font-weight: 700;
      font-size: 1.4rem;
      color: #16c0c3;
    }
  }

  .table-content {
    overflow: hidden;


    .table-list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      color: #aaa;

      &:nth-child(2n-1) {
        background-color: #16c0c332;
      }

      .table-item {
        place-self: center;
        padding: 0.5rem 0;


      }
    }
  }


}
</style>
